<template>
  <div class="container">
    <div class="type-info">
      <div class="type-test-wrapper">
        <div class="title-wrapper">
          <div class="title">打字速度单项考核</div>
          <img @click="showTypeTips" src="../assets/icons/svg/Tips.svg" alt="" />
        </div>
        <div class="type-area">
          <div class="text-static">
            <div class="group-item" v-for="(list, index) in charTypeList.slice(charTypeListGroupIndex, charTypeListGroupIndex + 1)" :key="index">
              <div class="line" v-for="(line, i) in list" :key="i">
                <div class="text-line">
                  <span v-for="item in line.array" :key="item.id" :class="{ red: item.status === 1, green: item.status === 2 }">{{ item.text }}</span>
                </div>
                <input ref="typeInputRefs" @select="inputSelect(i)" @mousedown="inputMousedown($event, line, index, i)" @keyup="inputKeyUp($event, line, index, i)"
                  @focus="getTypeFocus(i)" @compositionend="lineInputEnd($event, line, index, i)" @input="lineInput($event, line, index, i)"
                  @paste.prevent="() => {}" :disabled="line.disabled" v-model="line.msg" class="input-line" />
              </div>
            </div>
          </div>
          <div v-if="false" class="type-textarea">
            <textarea id="typeTextarea" @paste.prevent="() => {}" v-model="data.typeVal" :disabled="!data.startTypeTest" @focus="getTypeFocus" @input="typeInput" class="text-static textarea"></textarea>
          </div>
          <div class="type-statistics">已录入：{{ typeLength }} 总数：{{ data.exerciseText.length }} 用时：{{ data.totalTime }}秒 速度: {{ speedTypeByInput }} 进度：{{data.progress + '%'}} 正确率： {{data.correctRate + '%'}}</div>

          <form target="_blank" id="myform" action="https://www.52wubi.com/wbbmcx/search.php" method="post">
<!--              <input v-show="!data.typeDisabled" @click="pauseType" :value="data.isPause === true ? '继续' : '暂停'" type="button">-->
<!--              <input @click="typeInit" type="button" value="重新开始">-->
          </form>
        </div>
      </div>
      <div class="info--type-statistics">
        <div class="info">
          <img src="../assets/images/profile.jpg" />
        </div>
        <div class="type-statistics-wrapper">
          <div class="sub-title">倒计时：</div>
          <div class="CountDown" style="height: 60px;">
            <div class="number-wrapper">
              <div class="times-wrapper minutes-wrapper">
                <div class="item" v-for="(item, index) in formatCountDownTime(countdownState.count).slice(0, 2)" :key="index">
                  <div class="number">{{ item }}</div>
                </div>
              </div>
              <div class="symbol">:</div>
              <div class="times-wrapper seconds-wrapper">
                <div class="item" v-for="(item, index) in formatCountDownTime(countdownState.count).slice(2, 4)" :key="index">
                  <div class="number">{{ item }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="sub-title">打字情况：</div>
          <div class="statistics-value">正确率：<span class="val">{{ data.correctRate + '%' }}</span></div>
          <div class="statistics-value">打字速度：<span class="val">{{ speedTypeByInput }}</span></div>
          <div class="button-btns">
            <el-button color="#265DA4" :disabled="data.startTypeTest" @click="startType" class="button">开始考核</el-button>
            <el-button color="#265DA4" :disabled="!data.startTypeTest" @click="typeTestFinish" class="button">完成提交</el-button>
          </div>
        </div>
      </div>
    </div>

    <el-dialog v-model="dialogTableVisible" title="考试成绩" @close="typeTestResultConfirm">
      <div>
        <div class="statistics-value">正确率：<span class="val">{{ typeTestResult.correctRate + '%' }}</span></div>
        <div class="statistics-value">打字速度：<span class="val">{{ typeTestResult.speedTypeByInput }}</span></div>
      </div>
      <template #footer>
          <span class="dialog-footer">
            <el-button color="#265DA4" @click="typeTestResultConfirm">确定</el-button>
          </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref, computed, onMounted, reactive } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import countDown from '@/utils/countDown'

  let text = ref('贯彻执行消防法规，保障单位消防安全符合规定，掌握本单位的消防安全情况；将消防工作与本单位的生产、科研、经营、管理等活动统筹安排，批准实施年度消防工作计划；为本单位的消防安全提供必要的经费和组织保障；确定逐级消防安全责任，批准实施消防安全制度和保障消防安全的操作规程；组织防火检查，督促落实火灾隐患整改，及时处理涉及消防安全的重大问题；根据消防法规的规定建立专职消防队、义务消防队;组织制定符合本单位实际的灭火和应急疏散预案，并实施')
  let charTypeList = ref([])
  let charTypeList_flat = ref([]) // 平鋪展開
  let dialogTableVisible = ref(false)
  let typeTestResult = ref({})
  const { state: countdownState, start: startTimeout } = countDown(240)
  let typeInputRefs = ref([])
  let charTypeListSplitLine = ref(5) // 一组五行
  let charTypeListGroupIndex = ref(0) // 以五行為一組，當前打字到第幾組
  let regExp = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*-_（）——|{}【】‘；：”“'。，、？]")
  const data = reactive({
    intervalId: null, // 時間計時器
    startTime: new Date().getTime(),
    totalTime: 0, // 用時
    typeVal: '', // 已輸入文字
    charTypeList: [],
    typeDisabled: false, // 禁用
    progress: 0, // 進度
    correctRate: 0, // 正確率
    exerciseText: text.value, // 文本練習的全部文本
    isPause: false, // 是否暫停
    startTypeTest: false
  })

  // 輸入框選擇事件，失去焦點取消選中
  const inputSelect = val => {
    typeInputRefs.value[val].blur()
  }
  onMounted(() => {
    // 文本輸入框選擇事件
    // const input = document.querySelector("#typeTextarea");
    // input.addEventListener("select", typeTextareaSelection);

    // 禁止F12審查元素
    document.onkeydown = function() {
      let e = window.event || arguments[0]
      if (e.keyCode === 123) return false // 解開
      if (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 37 || e.keyCode === 39) return false
    }
    // 禁止右键
    document.oncontextmenu = function() {
      return false
    }
    // 禁止粘贴
    document.onpaste = () => {
      return false
    }

    window.onresize = function() {
      if (!data.startTypeTest) typeContextComputed()
      console.log('resize')
    }

    typeContextComputed()
  })
  const typeContextComputed = () => {
    let typeAreaPaddingLeft = parseInt(getComputedStyle(document.querySelector(".type-area"), null).paddingLeft)
    let typeAreaPaddingRight = parseInt(getComputedStyle(document.querySelector(".type-area"), null).paddingRight)
    let typeAreaWidth = document.querySelector(".type-area").clientWidth - typeAreaPaddingLeft - typeAreaPaddingRight
    console.log('typeAreaWidth: ', typeAreaWidth)
    let typeTextFontSize = parseInt(getComputedStyle(document.querySelector(".text-static"), null).fontSize)
    let lineTextLen = parseInt(typeAreaWidth / typeTextFontSize)
    console.log('lineTextLen: ', lineTextLen)

    let charTypeList1 = []
    console.log('data.exerciseText: ', data.exerciseText)
    for (let i = 0; i < data.exerciseText.length; i++) {
      let textCharAt = data.exerciseText.charAt(i)
      charTypeList1.push({
        text: textCharAt,
        status: 0,
        id: i + 1
      })
    }
    console.log('charTypeList: ', charTypeList1)
    let exerciseTextList = charTypeList1
    console.log('exerciseTextList: ', exerciseTextList)
    let a = []
    if (exerciseTextList.length > lineTextLen) {
      let textLength = exerciseTextList.length % lineTextLen === 0 ? parseInt(exerciseTextList.length / lineTextLen) : parseInt(exerciseTextList.length / lineTextLen) + 1;
      console.log('textLength: ', textLength)
      for (let i = 0; i < textLength; i++) {
        let array = exerciseTextList.splice(0, lineTextLen)
        console.log('array: ', array)
        a.push({
          array,
          msg: '',
          disabled: true
        });
      }
      console.log(groupList(a, charTypeListSplitLine.value))
      console.log('charTypeList: ', charTypeList.value)
      charTypeList.value = groupList(a, charTypeListSplitLine.value)
      console.log('charTypeList.value: ', charTypeList.value)
      // 提取出對象的 array 屬性並平鋪展開成一個一維數組
      var flattenedArray = flattenObjects(charTypeList.value).flatMap(item => item);
      console.log('flattenedArray: ', flattenedArray)
      charTypeList_flat.value = flattenedArray
    } else {
      a.push(exerciseTextList);
    }
  }
  // 遞迴函數，將二維數組中的對象提取成一維數組
  function flattenObjects(nestedArray) {
    return nestedArray.reduce(function(acc, current) {
      return acc.concat(current.map(function(item) {
        return item.array;
      }));
    }, []);
  }
  const formatCountDownTime = time => {
    if (data.startTypeTest && time <= 0) typeInit()
    let minutes = Math.floor(time / 60)
    let seconds = time % 60
    minutes = minutes.toString().padStart(2, '0') // 在分钟数不足两位时，在前面补0
    if (minutes === '-1') minutes = '00'
    seconds = seconds.toString().padStart(2, '0') // 在秒数不足两位时，在前面补0
    if (seconds === '-1') seconds = '00'
    return [minutes[0], minutes[1], seconds[0], seconds[1]]
  }
  const groupList = (array, subGroupLength) => {
    let index = 0;
    let newArray = [];

    while (index < array.length) {
      newArray.push(array.slice(index, index += subGroupLength));
    }

    return newArray;
  }

  const showTypeTips = () => {
    ElMessageBox.alert('This is a message', '考试须知', {
      // autofocus: false, // if you want to disable its autofocus
      confirmButtonText: '关闭',
      callback: (action) => {
      },
    })
  }
  const typeTestFinish = () => {
    typeTestResult.value = {
      correctRate: data.correctRate,
      speedTypeByInput: speedTypeByInput.value
    }
    console.log('typeTestResult: ', typeTestResult.value)
    dialogTableVisible.value = true

    typeInputRefs.value.map(item => {
      console.log('item: ', item.value)
      item.disabled = true
    })

    typeInit()
  }
  // 初始化 重新開始
  const typeInit = () => {
    console.log('typeInit')
    data.totalTime = 0
    data.typeVal = ''
    data.typeDisabled = false
    data.progress = 0
    data.isPause = false
    data.correctRate = 0
    clearInterval(data.intervalId)
    data.intervalId = null
    data.startTypeTest = false
    charTypeListGroupIndex.value = 0
    clearCountDown()
  }
  const clearCountDown = () => {
    console.log('clearCountDown')
    countdownState.count = 0
  }
  const typeTestResultConfirm = () => {
    typeInit()
    dialogTableVisible.value = false
    typeContextComputed()
  }

  // 文本輸入框選擇事件，選中後讓文本域失去焦點，禁止選中來刪除
  const typeTextareaSelection = (event) => {
    document.getElementById("typeTextarea").blur()
    let selection = event.target.value.substring(
      event.target.selectionStart,
      event.target.selectionEnd,
    );
    console.log('selection: ', selection)
  }

  // 暫停
  const pauseType = () => {
    data.isPause = !data.isPause
  }

  // 開始計時
  const startType = () => {
    charTypeList.value[charTypeListGroupIndex.value][0].disabled = false
    console.log('typeInputRefs.value[charTypeListGroupIndex.value] ;', typeInputRefs.value[charTypeListGroupIndex.value])
    setTimeout(() => {
      typeInputRefs.value[charTypeListGroupIndex.value].focus()
    }, 0)
    data.startTime = new Date().getTime()
    data.startTypeTest = true
    // 函数計時器正在進行中，退出函數
    if (data.intervalId) {
      clearInterval(data.intervalId)
      data.intervalId = null
      return
    }
    startTimeout()

    // 計時器為空，操作
    data.intervalId = setInterval(() => {
      // if (!data.isPause) data.totalTime++
      data.totalTime++
    }, 1000)
  }
  const lineInput = (e, val, group_i, line_i) => {
    console.log('start e.target.value: ', e.target.value === ' ')
    val.msg = val.msg.replace(/\s*/g, '')
    val.msg = val.msg.replace(/[a-zA-Z]/g, '')

    var inputField = typeInputRefs.value[line_i]
    var currentPosition = inputField.selectionStart; // 獲取光標位置
    var inputValue = inputField.value;
    console.log('inputValue: ', inputValue)

    // 如果光標位置不在最後，將光標移動到最後
    if (currentPosition !== inputValue.length) {
      inputField.value = inputValue;
      inputField.selectionStart = inputValue.length;
      inputField.selectionEnd = inputValue.length - 1;
    }

    console.log('start e: ', e)
    console.log('start val: ', val)
    console.log('start val.msg -++_+_+_+_+_+_+_=-=-=-=-=-: ', val.msg)
    console.log('line_i: ', line_i)
    let arr_total = val.array.filter(item => item.status !== 0)
    let arr_right = val.array.filter(item => item.status === 2)
    console.log('arr_total: ', arr_total)
    if (arr_total.length) data.correctRate = parseInt(arr_right.length / arr_total.length * 100).toFixed(2)
    if (arr_total.length > val.msg.length) {
      for (let i = val.msg.length; i <= arr_total.length; i++) {
        val.array[i].status = 0 // 退格後把當前字狀態重置為灰色
      }
    }

    console.log('regExp: ', regExp.test(e.data))
    if (regExp.test(e.data)) {
      console.log('e.data: ', e.data)
      console.log('val[val.msg.length - 1]: ', val.array[val.msg.length - 1])
      console.log('type length no: ', val.msg.length)
      if (e.data === val.array[val.msg.length - 1].text) {
        val.array[val.msg.length - 1].status = 2
      } else {
        val.array[val.msg.length - 1].status = 1
      }
    }

    if (val.msg.length >= val.array.length) {
      if (val.array[val.msg.length - 1].status === 2) {
        console.log('line_i: ', line_i)
        console.log('val: ', val)
        if (line_i === charTypeListSplitLine.value - 1) {
          charTypeListGroupIndex.value++
          charTypeList.value[charTypeListGroupIndex.value][0].disabled = false
          console.log('e.target.value.slice(val.array.length): ', e.target.value.slice(val.array.length))
          charTypeList.value[charTypeListGroupIndex.value][0].msg = e.target.value.slice(val.array.length)
          setTimeout(() => {
            typeInputRefs.value[0].focus()
          }, 0)
        } else {
          charTypeList.value[charTypeListGroupIndex.value][line_i].disabled = true
          typeInputRefs.value[line_i].blur()
          charTypeList.value[charTypeListGroupIndex.value][line_i + 1].disabled = false
          charTypeList.value[charTypeListGroupIndex.value][line_i + 1].msg = e.target.value.slice(val.array.length)
          setTimeout(() => {
            typeInputRefs.value[line_i + 1].focus()
          }, 0)
        }
      }
      val.msg = val.msg.slice(0, val.array.length)
    }
  }
  const inputMousedown = (e, val, group_i, line_i) => {
    return
    console.log('e: ', e)
    if (e.button === 0 || e.button === 2) {
      var inputField = typeInputRefs.value[line_i]
      console.log('inputField.value: ', inputField.value)
      inputField.setSelectionRange(inputField.value.length, inputField.value.length)
      return
      var currentPosition = inputField.selectionStart; // 獲取光標位置
      var inputValue = inputField.value;

      // 如果光標位置不在最後，將光標移動到最後
      if (currentPosition !== inputValue.length) {
        inputField.value = inputValue;
        inputField.selectionStart = inputValue.length;
        inputField.selectionEnd = inputValue.length;
      }
    }
  }
  const inputKeyUp = (e, val, group_i, line_i) => {
    if (e.keyCode === 8 && val.msg === '') {
      if (line_i !== 0) {
        charTypeList.value[charTypeListGroupIndex.value][line_i].disabled = true
        charTypeList.value[charTypeListGroupIndex.value][line_i - 1].disabled = false
        setTimeout(() => {
          typeInputRefs.value[line_i - 1].focus()
        }, 0)
      }
      /*if (line_i === 0 && charTypeListGroupIndex.value !== 0) {
        charTypeListGroupIndex.value--
        // charTypeList.value[charTypeListGroupIndex.value][line_i].disabled = true
        charTypeList.value[charTypeListGroupIndex.value][charTypeListSplitLine.value].disabled = false
        setTimeout(() => {
          typeInputRefs.value[charTypeListSplitLine.value].focus()
        }, 0)
      }*/
    }

    if (e.keyCode === 13 && e.target.value.length >= charTypeList.value[charTypeListGroupIndex.value][line_i].array.length) {
      charTypeList.value[charTypeListGroupIndex.value][line_i].disabled = true
      charTypeList.value[charTypeListGroupIndex.value][line_i + 1].disabled = false
      setTimeout(() => {
        typeInputRefs.value[line_i + 1].focus()
      }, 0)
    }

    let inputField = typeInputRefs.value[line_i]
    let currentPosition = inputField.selectionStart; // 獲取光標位置
    console.log('selectionStart selectionEnd: ', input.selectionStart, input.selectionEnd)
    let inputValue = inputField.value;

    // 如果光標位置不在最後，將光標移動到最後
    if (currentPosition !== inputValue.length) {
      inputField.value = inputValue;
      inputField.selectionStart = inputValue.length;
      inputField.selectionEnd = inputValue.length;
    }
  }
  const lineInputEnd = (e, val, group_i, line_i) => {
    console.log('end e: ', e)
    console.log('end val: ', val)
    console.log('line_i: ', line_i)
    console.log('e.target.value: ', e.target.value)
    console.log('e.target.value.length: ', e.target.value.length)

    if (e.target.value.length >= val.array.length) {
      val.msg = val.msg.slice(0, val.array.length)
      for (let i = 0; i < val.msg.length; i++) {
        if (val.array[i].text === val.msg[i]) val.array[i].status = 2
        else val.array[i].status = 1
      }

      // if (val.array[val.msg.length - 1].status === 2) {
        let arr_all_total = charTypeList_flat.value.filter(item => item.status !== 0)
        console.log('arr_all_total: ', arr_all_total)
        console.log('e.target.value ————————————————————————: ', e.target.value)
        if (line_i === charTypeListSplitLine.value - 1) {
          if (charTypeListGroupIndex.value >= charTypeList.value.length) return
          charTypeListGroupIndex.value++ // 去下一組
          charTypeList.value[charTypeListGroupIndex.value][0].disabled = false
          setTimeout(() => {
            typeInputRefs.value[0].focus()
          }, 0)
        } else { // 去下一行
          charTypeList.value[charTypeListGroupIndex.value][line_i].disabled = true
          typeInputRefs.value[line_i].blur()
          charTypeList.value[charTypeListGroupIndex.value][line_i + 1].msg = e.target.value.slice(val.array.length)

          for (let i = 0; i < charTypeList.value[charTypeListGroupIndex.value][line_i + 1].msg.length; i++) {
            if (charTypeList.value[charTypeListGroupIndex.value][line_i + 1].array[i].text === charTypeList.value[charTypeListGroupIndex.value][line_i + 1].msg[i]) {
              charTypeList.value[charTypeListGroupIndex.value][line_i + 1].array[i].status = 2
            } else {
              charTypeList.value[charTypeListGroupIndex.value][line_i + 1].array[i].status = 1
            }
          }
          charTypeList.value[charTypeListGroupIndex.value][line_i + 1].disabled = false
          setTimeout(() => {
            typeInputRefs.value[line_i + 1].focus()
          }, 0)
        }
      // }
    }

    if (e.target.value.length <= val.array.length) {
      for (let i = 0; i < e.target.value.length; i++) {
        if (val.array[i].text === e.target.value[i]) {
          val.array[i].status = 2
          console.log('val: ', val)
        } else {
          val.array[i].status = 1
        }
      }
    }
  }
  // 輸入框獲取焦點
  const getTypeFocus = val => {
    return
    var inputField = typeInputRefs.value[val]
    var currentPosition = inputField.selectionStart; // 獲取光標位置
    var inputValue = inputField.value;

    // 如果光標位置不在最後，將光標移動到最後
    if (currentPosition !== inputValue.length) {
      inputField.value = inputValue;
      inputField.selectionStart = inputValue.length;
      inputField.selectionEnd = inputValue.length;
    }
    return
    if (typeLength.value <= 0) {
      console.log('开始计时')
      data.isPause = false
      startType()
    }
  }
  // 開始輸入
  const typeInput = () => {
    if (data.typeVal.length >= data.exerciseText.length) {
      data.typeDisabled = true
      data.isPause = true
      data.typeVal = data.typeVal.substring(0, data.exerciseText.length)
      clearInterval(data.intervalId)
      data.startTypeTest = false
    } else {
      data.isPause = false
    }
  }
  // 變換顏色
  const changeColor = function (index, status) {
    return
    let item = data.charTypeList[index]
    console.log('data.typeVal: ', data.typeVal.length)
    console.log(charTypeList.value.flat(Infinity)[index])
    if (charTypeList_flat.value[index]) charTypeList_flat.value[index].status = status
    let arr_total = charTypeList_flat.value.filter(item => item.status !== 0)
    let arr_right = charTypeList_flat.value.filter(item => item.status === 2)
    if (arr_total.length) data.correctRate = parseInt(arr_right.length / arr_total.length * 100).toFixed(2)
    // if (item) item.status = status
  }

  // 計算屬性的 getter
  const typeLength = computed(() => {
    // todo:遍歷了所有的字符，後面可以優化性能
    let exerciseLen = data.exerciseText.length;
    for (let i = 0; i < data.exerciseText.length; i++) {
      changeColor(i, 0)
    }
    // let len = data.typeVal.length
    let len = charTypeList_flat.value.filter(item => item.status !== 0).length
    console.log('len: ', len)
    data.progress = (len / charTypeList_flat.value.length * 100).toFixed(3)

    if (data.progress > 100) data.progress = 100
    // console.log('progress: ', data.progress)
    // 錄入完成自動暫停
    if (len >= exerciseLen) {
      console.log('done')
      data.isPause = true
    }

    if (len >= 1) {
      for (let i = 0; i < len; i++) {
        let inputChar = data.typeVal.charAt(i);
        console.log('inputChar: ', inputChar)
        let trueChar = data.exerciseText.charAt(i)
        console.log('trueChar: ', trueChar)
        if (inputChar === trueChar) {
          changeColor(i, 2) // 綠色 輸入正確
        } else {
          changeColor(i, 1) // 紅色
        }
      }

      // let arr_total = data.charTypeList.filter(item => item.status !== 0)
      // let arr_right = data.charTypeList.filter(item => item.status === 2)
      // data.correctRate = (arr_right.length / arr_total.length * 100).toFixed(2)
    }
    return len
  })
  const speedTypeByInput = computed(() => {
    console.log('charTypeList_flat --------------------_+++_-=-=-=-=-==-: ', charTypeList_flat.value)
    let arr_total = charTypeList_flat.value.filter(item => item.status !== 0)
    console.log('arr_total: ', arr_total)
    // console.log('data.totalTime: ', data.totalTime)
    let speedVal = (arr_total.length / data.totalTime) * 60 // xxx字每分鐘
    speedVal = parseInt(speedVal) || 0
    // console.log('speedVal: ', speedVal)
    if (!speedVal) speedVal = 0
    return speedVal + "字/分钟"
  })
  // 打字速度
  const speedTypeByTextarea = computed(() => {
    console.log('typeLength.value :', typeLength.value)
    console.log('data.totalTime :', data.totalTime)
    let speedVal = ((typeLength.value / data.totalTime)) * 60 // xxx字每分鐘
    console.log('speedVal: ', speedVal)
    speedVal = parseInt(speedVal) || 0
    // if (speedVal.indexOf(".00") >= 0) { // 後面是.00就去掉
    //   speedVal = speedVal.substring(0, speedVal.length - 3)
    // }
    if (speedVal == NaN) {
      speedVal = 0
    }
    if (speedVal === Infinity) speedVal = 0
    return speedVal + "字/分钟"
  })
</script>

<style scoped lang="scss">
.container {
  --text-fontSize: 26px;

  height: 100vh;
  background-color: #E2E4F0;

  .type-info {
    width: 85%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    padding-top: 30px;

    .type-test-wrapper {
      flex: 8;
      background-color: #fff;
      margin-right: 20px;
      border-radius: 10px;
      position: relative;

      .title-wrapper {
        background-color: #F1F1F9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 22px;
        border-radius: 10px 10px 0 0;

        .title {
          font-weight: bolder;
        }

        img {
          width: 22px;
        }
      }

      .type-area {
        padding: 20px;

        .text-static {

          .group-item {

            .line {
              margin-bottom: 15px;

              .text-line {
                transform: translateX(4px);

                span {

                  &.red {
                    color: red;
                    font-weight: bold;
                  }

                  &.green {
                    //color: #006666;
                    color: green;
                    font-weight: bold;
                    //text-decoration: line-through
                  }
                }
              }

              .input-line {
                width: 100%;
                //transform: translateX(6px);
                font-size: var(--text-fontSize);
                border: 1px solid #eee;
              }
            }
          }
        }

        .type-textarea {
          margin-top: 10px;
        }

        .text-static {
          font-size: var(--text-fontSize);

          &.textarea {
            width: 100%;
            height: 240px;
            resize: none;
          }
        }

        .type-statistics {
          margin: 10px 0;
          position: absolute;
          bottom: 10px;
        }

        .text-static, .text-static span {
          -webkit-touch-callout: none; /*系统默认菜单被禁用*/
          -webkit-user-select: none; /*webkit浏览器*/
          -khtml-user-select: none; /*早期浏览器*/
          -moz-user-select: none;/*火狐*/
          -ms-user-select: none; /*IE10*/
          user-select: none;
        }
      }
    }

    .info--type-statistics {
      flex: 2;

      .info {
        border-radius: 10px;
        margin-bottom: 20px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-content: center;
        padding: 28px 0;

        img {
          width: 100px;
          height: 100px;
          border-radius: 50%;
        }
      }

      .type-statistics-wrapper {
        border-radius: 10px;
        background-color: #fff;
        padding: 20px;

        .sub-title {
          font-weight: bolder;
          margin-bottom: 10px;
          font-size: 14px;
        }

        .CountDown {

          .number-wrapper {
            display: flex;
            //justify-content: space-between;
            position: relative;
            font-size: 32px;

            &::after {
              //content: ':';
              //position: absolute;
              //top: 50%;
              //font-size: 24px;
              //font-weight: bolder;
              //transform: translateY(-50%);
              //left: 50%;
            }

            .symbol {
              margin-left: 10px;
              margin-right: 20px;
            }
            .times-wrapper {
              display: flex;

              .item {
                width: 34px;
                height: 44px;
                border: 1px solid #000;
                border-radius: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 12px;
                box-shadow: 2px 3px 7px #888;

                .number {
                  font-size: 32px;
                }
              }
            }
          }
        }

        .statistics-value {
          border: 1px solid ;
          border-radius: 6px;
          padding: 16px;
          height: 46px;
          display: flex;
          margin-bottom: 15px;
          align-items: center;

          .val {
            font-weight: bolder;
          }
        }

        .button-btns {
          margin: 100px 0 10px;

          .button {
            width: 160px;
            height: 40px;
            //background-color: #488BCD;
            display: flex;
            //color: #FFF;
            font-size: 13px;
            border-radius: 6px;
            justify-content: center;
            align-items: center;
            margin: 4px auto 0;
            //cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
